<template>
  <div class="leave-container">
    <NavBar title="请假审批"></NavBar>
    <van-form @submit="onSubmit" label-align: center>
      <van-field
        v-model="stuName"
        name="学生姓名"
        label="学生姓名"
        placeholder="学生姓名"
        :rules="[{ required: true, message: '请填写姓名' }]"
      />
      <van-field
        v-model="stuTel"
        name="电话号码"
        label="电话号码"
        placeholder="电话号码"
        :rules="[{ required: true, message: '请填写电话号码' }]"
      />

      <van-field
        readonly
        clickable
        name="picker"
        :value="leaveClassify"
        label="请假类型"
        @click="showPicker = true"
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @confirm="on_Confirm"
          @cancel="showPicker = false"
        />
      </van-popup>
      <van-field
        v-if="leaveReasonShow"
        v-model="leaveReason"
        name="请假原因"
        label="请假原因"
        placeholder="请假原因"
        :rules="[{ required: true, message: '请填写请假原因' }]"
      />
      <van-cell title="选择请假日期区间" :value="date" @click="show = true" />
      <van-calendar v-model="show" type="range" @confirm="onConfirm" />
      <van-button round block type="info" native-type="submit" style="w"
        >提交</van-button
      >
    </van-form>
  </div>
</template>

<script>
import NavBar from "@/components/navBar.vue";
import { Notify } from "vant";
import router from "@/router";
export default {
  components: {
    NavBar,
  },
  // watch:{

  // },
  data() {
    return {
      stuName: "",
      stuTel: "",
      leaveReason: "",
      date: "",
      show: false,
      leaveClassify: "",
      columns: ["事假", "病假", "实习", "回家", "其他"],
      showPicker: false,
      leaveReasonShow: false,
    };
  },
  methods: {
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      const [start, end] = date;
      this.show = false;
      this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
    },
    on_Confirm(value) {
      this.leaveClassify = value;
      this.showPicker = false;
      if (this.leaveClassify === "事假" || this.leaveClassify === "其他") {
        this.leaveReasonShow = true;
      } else {
        this.leaveReasonShow = false;
      }
    },
    onSubmit(values) {
      // Notify({ type: "success", message: "申请成功" });
      // router.back();
      if (
        (this.stuName !== "") &
        (this.stuTel !== "") &
        (this.leaveClassify !== "") &
        (this.date !== "")
      ) {
        Notify({ type: "success", message: "申请成功" });
        router.back();
      } else {
        Notify({ type: "danger", message: "请正确输入" });
      }
    },
  },
};
</script>

<style lang='less' scoped>
* {
  margin: 0;
  padding: 0;
}
.leave-container {
  display: flex;
  flex-direction: column;
  padding-top: 46px;
  height: calc(100vh - 50px);
}
</style>